<template>
    <div class="count">
        <el-card class="content">
            <el-form :inline="true" :model="formContent" class="top-form">

                <div class="col">
                    <el-form-item class="top-input" label="标签名称">
                        <el-input v-model.trim="formContent.tagName"></el-input>
                    </el-form-item>
                </div>

                <div class="col">
                    <el-form-item class="top-input" label="状态">
                        <el-select v-model="formContent.state" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="col col-btn">
                    <el-button
                        size="small"
                        @click="reset"
                    >清除
                    </el-button>

                    <el-button
                        size="small"
                        type="primary"
                        @click="searchList"
                    >搜索
                    </el-button>
                </div>

                <div class="col col-last">
                    <el-button type="text" icon="el-icon-back" @click="$router.back()"
                               v-if="$route.query.id">
                        返回学科
                    </el-button>

                    <el-button
                        type="success"
                        icon="el-icon-edit"
                        size="small"
                        class="btn-add"
                        @click="add">
                        新增标签
                    </el-button>
                </div>
            </el-form>

            <el-alert
                :title="`也许大概可能一共有${counts}条数据`"
                type="info"
                show-icon
                :closable="false"
            >
            </el-alert>
            <!-- 放置表格和分页 -->

            <el-table v-loading="loading" style="margin-top: 10px" :data="list">
                <el-table-column align="left" width="100px" label="序号" type="index"/>
                <el-table-column align="left" label="所属学科" prop="subjectName"/>
                <el-table-column align="left" label="标签名称" prop="tagName"/>
                <el-table-column align="left" label="创建者" prop="username"/>
                <el-table-column align="left" label="创建日期" prop="addDate">
                    <template slot-scope="scope">
                        {{ timeFormat(scope.row.addDate) }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="状态" prop="state">
                    <template slot-scope="scope">
                        {{ scope.row.state === 0 ? '已启用' : '已禁用' }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作">
                    <!-- 操作按钮 -->
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="changeState(scope.row)">
                            <span v-if="scope.row.state === 1 ">启用</span>
                            <span v-else>禁用</span>
                        </el-button>

                        <el-button
                            type="text"
                            size="small"
                            v-if="scope.row.state != 'deleted'"
                            :disabled='scope.row.state ==1'
                            @click="update(scope.row)"
                        >修改
                        </el-button>

                        <el-button
                            type="text"
                            size="small"
                            :disabled='scope.row.state ==1'
                            @click="deleteList(scope.row)"
                        >删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="margin-top: 20px"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage2"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="->, prev, pager, next,sizes, jumper"
                :total="counts"
            >
            </el-pagination>

        </el-card>
        <!-- 组件封装 -->
        <tagsAdd ref='tagsAdd' :visible.sync='visible'/>
    </div>
</template>

<script>
import TagsAdd from '../components/tags-add.vue'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import dayjs from 'dayjs'

export default {
    name: 'TagsPage',
    components: {
        TagsAdd
    },
    data () {
        return {
            visible: false, //控制弹出窗口
            options: [
                {
                    value: 0,
                    label: '启用'
                },
                {
                    value: 1,
                    label: '禁用'
                }
            ],
            loading: false,
            list: [], // 接数据的Tag
            title: '',
            // 搜索模块需要绑定的两个参数
            formContent: {
                tagName: '',
                state: null
            },
            // 分页模块
            counts: 0,
            page: 0,
            pagesize: 0,
            directoryList: [],
            currentPage2: 1,
            subjectList: []
        }
    },
    created () {
        console.log(this.$route.query)
        if (this.$route.query.name) {
            console.log(this.$route.query.name)
            this.formContent = {
                subjectID: this.$route.query.id,
            }
            this.searchList ()
        } else {
            this.getList()
        }
    },
    methods: {

        //添加
        add () {
            this.visible = true
        },
        // 修改目录
        update (row) {
            this.visible = true
            this.$refs.tagsAdd.form = { ...row }
        },
        // 分页
        async handleSizeChange (val) {
            this.pagesize = val
            //重新渲染
            this.getList()
        },
        async handleCurrentChange (val) {
            this.page = val
            // 重新渲染
            this.getList()
        },

        //获取列表数据信息
        async getList () {
            try {
                const { data } = await list({
                    page: this.page,
                    pagesize: this.pagesize
                })
                console.log(data)

                this.list = data.items
                this.counts = data.counts

                // this.pagesize = data.pagesize;
            } catch (err) {
                console.log('获取数据列表失败')
            }
        },
        // 删除
        deleteList (row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    await remove(row)
                    //
                    if (this.directoryList.length === 1) {
                        this.page--
                    }
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //搜索功能
        async searchList () {
            const { data } = await list(this.formContent)
            //接收数据
            this.list = data.items
            this.counts = data.counts
        },

        //清除搜索框,让值为空
        reset () {
            this.formContent.tagName = ''
            this.formContent.state = null
            this.getList()
        },

        timeFormat (time) {
            const obj = new dayjs(time)
            return obj.format('YYYY-MM-DD HH:mm:ss')
        },

        // 禁用状态
        async changeState (val) {
            await changeState({
                id: val.id,
                //状态区分
                state: val.state === 1 ? 0 : 1
            })
            this.getList()
            this.$message({
                type: 'success',
                message: '操作成功!'
            })
        }
    }
}
</script>

<style lang='scss'>
.count {
    padding: 10px;

    .content {
        padding: 5px;

        .top-form {
            display: flex;

            .col {
                flex: 1;

                .top-input {
                    width: 300px;
                }
            }

            .col-btn {
                min-width: 150px;
            }

            .col-last {
                display: flex;
                justify-content: end;

                button {
                    height: 32px;
                }
            }
        }
    }
}
</style>
